<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{display:none;}
    </style>
</head>
<body>
<div id="div2">
    <input type="button" value="第一" class="active">
    <input type="button" value="第二">
    <input type="button" value="第三">
</div>
<div class="box" style="display:block;">11111</div>
<div class="box">22222</div>
<div class="box">33333</div>
</body>
<script type="text/javascript">
    window.onload = function () {
        var oTab = new TabSwitch("div2");
    }
    var aBtn = null;
    var aDiv = null;
    function TabSwitch(id){
        var div2 = document.getElementById(id);
        this.aBtn = div2.getElementsByTagName('input');
        this.aDiv = document.getElementsByClassName('box');
        var _this =this;
        for(i=0;i<this.aBtn.length;i++){
            this.aBtn[i].index = i;
            this.aBtn[i].onclick = function () {
                _this.tab(this);
            }
        }
    }
    TabSwitch.prototype.tab = function (aBtn){
        for(i=0;i<this.aBtn.length;i++){
            this.aBtn[i].className = '';
            this.aDiv[i].style.display = 'none';
        }
        aBtn.className = 'active';
        this.aDiv[aBtn.index].style.display = 'block';
    }
</script>
</html>